<template>
  <a-tabs v-model:activeKey="activeKey" @tab-click="handleChange" v-bind="$attrs">
    <a-tab-pane :key="item.key" :tab="item.name" v-for="item in props.tabsList">
      <slot></slot>
    </a-tab-pane>
    <template #renderTabBar="{ DefaultTabBar, ...list }" v-if="props.rightTabs.length">
      <div class="custom-tab-bar">
        <component :is="DefaultTabBar" v-bind="list" />
        <TabsEditCard
          :tabsValue="activeKey"
          :tabsList="localRightTabs"
          class="TabsEditCard"
          @change-tab="handleChange"
          @delete-tab="handleDelete"
        />
      </div>
    </template>
    <template #rightExtra>
      <slot name="rightExtra"></slot>
    </template>
  </a-tabs>
</template>
<script lang="ts" setup>
import TabsEditCard from '@/views/myPipeline/running/components/TabsEditCard.vue';
const props = defineProps({
  tabsList: {
    type: Array<CommonTypes.TabItem>,
    default: () => [],
  },
  tabsValue: {
    type: String,
    default: '',
  },
  rightTabs: {
    type: Array<CommonTypes.TabItem>,
    default: () => [],
  },
});

const emits = defineEmits(['handleChange', 'deleteTab']);
const activeKey: any = ref('');
const localRightTabs = ref<CommonTypes.TabItem[]>([]);

const handleChange = (key: any) => {
  emits('handleChange', key);
};

const handleDelete = (list: CommonTypes.TabItem[]) => {
  emits('deleteTab', list);
};

watch(
  () => props.tabsList,
  (newVal: any) => {
    !props.tabsValue && (activeKey.value = newVal[0].key);
  },
  {
    deep: true,
    immediate: true,
  },
);

watch(
  () => props.rightTabs,
  (newVal: any) => {
    localRightTabs.value = newVal;
  },
  {
    deep: true,
    immediate: true,
  },
);

watch(
  () => props.tabsValue,
  (newVal: any) => {
    activeKey.value = newVal;
  },
  {
    deep: true,
    immediate: true,
  },
);
</script>

<style lang="less" scoped>
.custom-tab-bar {
  display: flex;
  .TabsEditCard {
    margin-left: 20px;
  }
}
</style>
